import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
    handleTodosDone = () => {
        this.props.delTodoChecked()
    }
    handleAllChecke = (event) => {
        this.props.updateCheckAll(event.target.checked)
    }
    render() {
        const {todosDone,total} = this.props
        return (
            <div className="todo-footer">
                <label>
					<input type="checkbox" checked={todosDone===total&&total!==0} onChange={this.handleAllChecke}/>
				</label>
				<span>
					<span>已完成{todosDone}</span> / 全部{total}
				</span>
				<button className="btn btn-danger" onClick={this.handleTodosDone}>清除已完成任务</button>
            </div>
        )
    }
}
